<template>
	<view class="users-content">
		
		<view class="users-list" v-if="usersList && usersList.length > 0">
			<view v-for="(user, index) in usersList" :key="index" class="user-item">
				<view class="user-info">
					<view class="user-name">{{ user.name || '未知姓名' }}</view>
					<view class="user-details">
						<view class="detail-row">
							<view class="detail-item">
								<text class="detail-label">学工号：</text>
								<text class="detail-value">{{ user.idCardNumber || '暂无工号' }}</text>
							</view>
							<view class="detail-item">
								<text class="detail-label">卡号：</text>
								<text class="detail-value">{{ user.cardNo || '暂无卡号' }}</text>
							</view>
						</view>
						<view class="detail-row">
							<view class="detail-item">
								<text class="detail-label">类别：</text>
								<text class="detail-value">{{ getTypeText(user.type) }}</text>
							</view>
							<view class="detail-item">
								<text class="detail-label">入住：</text>
								<text class="detail-value">{{ formatTime(user.startTime) || '未设置' }}</text>
							</view>
						</view>
						<view class="detail-row">
							<view class="detail-item">
								<text class="detail-label">离开：</text>
								<text class="detail-value">{{ formatTime(user.endTime) || '未设置' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty-users" v-else>
			<view class="empty-icon">
				<text class="iconfont">👥</text>
			</view>
			<text class="empty-text">暂无住户信息</text>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request';

	export default {
		name: 'TenantUsers',
		props: {
			roomId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				usersList: [],
				usersCount: 0,
				relationDict: [] // 存储关系类型字典
			}
		},
		watch: {
			// 监听 roomId 变化，重新加载数据
			roomId: {
				handler(newVal) {
					if (newVal) {
						this.loadUsersData();
					}
				},
				immediate: true
			}
		},
		mounted() {
			// 组件挂载时加载字典数据
			this.loadRelationDict();
		},
		methods: {
			// 加载关系类型字典
			async loadRelationDict() {
				try {
					const res = await request({
						url: '/system/dict/data/type/relation',
						method: 'get'
					});
					
					if (res.code === 200) {
						this.relationDict = res.data || [];
					}
				} catch (error) {
					console.error('获取关系类型字典失败:', error);
				}
			},

			// 加载住户数据
			async loadUsersData() {
				if (!this.roomId) return;
				
				try {
					const res = await request({
						url: '/tenantuser/tenant/listruzhu',
						method: 'get',
						params: {
							homeId: this.roomId,
							isFlag: 1
						}
					});
					
					if (res.code === 200) {
						this.usersCount = res.total || 0;
						this.usersList = res.rows || [];
						// 向父组件发送数据更新事件
						this.$emit('update-users-count', this.usersCount);
					}
				} catch (error) {
					console.error('获取住户信息失败:', error);
					this.usersList = [];
					this.usersCount = 0;
					this.$emit('update-users-count', 0);
				}
			},
			
			// 刷新数据
			refresh() {
				this.loadUsersData();
			},

			// 格式化时间
			formatTime(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},

			// 获取类别文本（使用字典）
			getTypeText(type) {
				if (!this.relationDict || this.relationDict.length === 0) {
					// 如果字典未加载，使用默认值
					switch (type) {
						case 0:
							return '学生';
						case 1:
							return '教职工';
						case 2:
							return '维护人员';
						case 3:
							return '其他';
						default:
							return '未知';
					}
				}
				
				// 从字典中查找对应的标签
				const dictItem = this.relationDict.find(item => item.dictValue == type);
				return dictItem ? dictItem.dictLabel : '未知';
			}
		}
	}
</script>

<style lang="scss">
	/* 住户信息样式 */
	.users-content {
		padding: 30rpx;
	}

	.users-header {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.users-title {
		display: block;
		font-size: 36rpx;
		font-weight: 600;
		color: #303133;
		margin-bottom: 10rpx;
	}

	.users-subtitle {
		display: block;
		font-size: 26rpx;
		color: #909399;
	}

	.users-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.user-item {
		display: flex;
		align-items: flex-start;
		padding: 25rpx;
		background-color: #f8f9fa;
		border-radius: 16rpx;
		border: 2rpx solid rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}

	.user-item:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.user-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		min-width: 0;
	}

	.user-main-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10rpx;
		margin-bottom: 8rpx;
	}

	.user-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #303133;
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.user-status-tag {
		flex-shrink: 0;
	}

	.status-tag {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		font-weight: 500;
	}

	.status-tag.active {
		background: linear-gradient(135deg, #67c23a, #5daf34);
		color: #ffffff;
		box-shadow: 0 4rpx 12rpx rgba(103, 194, 58, 0.3);
	}

	.status-tag.inactive {
		background: linear-gradient(135deg, #909399, #606266);
		color: #ffffff;
		box-shadow: 0 4rpx 12rpx rgba(144, 147, 153, 0.3);
	}

	.user-details {
		margin-top: 8rpx;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.detail-row {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.detail-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
		flex: 1;
		min-width: 0;
	}

	.detail-label {
		font-size: 24rpx;
		color: #606266;
		flex-shrink: 0;
		white-space: nowrap;
	}

	.detail-value {
		font-size: 24rpx;
		color: #303133;
		font-weight: 500;
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.empty-users {
		text-align: center;
		padding: 80rpx 0;
	}

	.empty-icon {
		width: 120rpx;
		height: 120rpx;
		background: rgba(75, 113, 247, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 20rpx;
	}

	.empty-icon .iconfont {
		font-size: 60rpx;
		color: #4B71F7;
	}

	.empty-text {
		font-size: 28rpx;
		color: #909399;
	}
</style>
